<template>
  <div class="box">
    <div class="top">
      <p class="title">故障检测</p>
      <p class="bg"></p>
      <!-- <p class="right">
        可预约总量
        <span>99999</span>
        人
      </p> -->
    </div>
    <div class="number">
      <span class="number-title"
        >故障数量
        <div style="color: #29fcff">{{ FaultCount.all }}</div>
      </span>
      <span class="number-title"
        >已处理
        <div style="color: #29fcff">{{ FaultCount.handleCount }}</div></span
      >
      <span class="number-title"
        >未处理
        <div style="color: #29fcff">{{ FaultCount.noHandleCount }}</div></span
      >
    </div>

    <div class="charts">
      <el-table
        class="custom-table"
        :data="tableData"
        style="width: 95%"
        border
      >
        <el-table-column
          :resizable="false"
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column
          :resizable="false"
          prop="robotName"
          label="设备名称"
          sortable
          :show-overflow-tooltip="true"
        />
        <el-table-column
          :resizable="false"
          prop="faultRemark"
          label="故障描述"
          sortable
          :show-overflow-tooltip="true"
        />
        <el-table-column
          :resizable="false"
          prop="findTime"
          label="发现时间"
          :show-overflow-tooltip="true"
          sortable
        >
          <template #default="{ row }">
            <!-- <el-tooltip :content="formatTime(row.findTime)" placement="top"> -->
            <!-- <div class="no-wrap"> -->
            {{ formatTime(row.findTime) }}
            <!-- </div> -->
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column
          :resizable="false"
          prop="handleStatus"
          label="处理状态"
          sortable
        >
          <template #default="{ row }">
            {{ handleStatusFormatter(row.handleStatus) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { RobotApi } from "@/api/map/faultlist";
import dayjs from "dayjs";
onMounted(async () => {
  const res = await RobotApi.getRobotFaultList(null);
  tableData.value = res;
  //console.log(res, "首页getRobotFaultList");
  const ress = await RobotApi.getRobotFaultCount();
  FaultCount.value = ress;
  //console.log(ress, "getRobotFaultCount");
});
const FaultCount = ref<any>({});
const tableData = ref([]);

// 时间格式化函数
const formatTime = (timestamp) => {
  if (!timestamp) return ""; // 如果时间戳为空，返回空字符串
  return dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss"); // 自定义格式
};
const handleStatusFormatter = (status: any) => {
  const STATUSES = [
    { handleStatus: 0, name: "未处理" },
    { handleStatus: 1, name: "处理中" },
    { handleStatus: 2, name: "已处理" },
  ];

  const matched = STATUSES.find((item) => item.handleStatus === status);
  return matched ? matched.name : "";
};
</script>

<style scoped lang="scss">
.box {
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;

  .top {
    margin-left: 20px;

    .title {
      color: white;
      font-size: 20px;
    }

    .bg {
      width: 68px;
      height: 7px;
      background: url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }

    .right {
      float: right;
      color: white;
      font-size: 20px;
      span {
        color: #ccc;
      }
    }
  }

  .number {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .number-title {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    span {
      width: 35%;
      height: 50px;
      text-align: center;
      line-height: 20px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
      color: #fff;
    }
  }

  .charts {
    display: flex;
    justify-content: center;
    height: 230px;
  }
}
/* 设置表格宽度和 box-sizing */
::v-deep .el-table {
  margin-top: 16px;
  background-color: transparent !important;
  border: 1px solid #29fcff !important;
  width: 100%; /* 或者设置一个具体的宽度 */
  height: 185px;
  table-layout: fixed; /* 确保表格宽度固定，避免扩展 */
  box-sizing: border-box; /* 包括边框和内边距在内计算宽度 */
}
::v-deep .el-table tr {
  color: #fff;
  height: 46px;
  white-space: nowrap;
  background-color: transparent !important;
}

::v-deep .custom-table .el-table__header th,
::v-deep .custom-table .el-table__body td {
  text-align: center;
  border: 1px solid #29fcff;
  background-color: transparent !important;
}
</style>
